<template>
	<view class="pop-promot-box">
		<view class="bg1">
			<view class="bg2">
				<view class="sign-pop-h1">今天可以领取188积分</view>
				<view class="sign-pop-h2">已连续签到2天</view>
				<view class="bg-in1">
					<view class="bg-in2">
						<view class="sign-pop-h3">签到满一周/月获得额外积分奖励</view>
						<view class="flex-wrap">
							<view class="day-card" :class="item.day === 7 ? 'last-day' : item.active ? 'active' : ''" v-for="(item, i) in list" :key="i">
								<view class="day-title">第{{item.day}}天</view>
								<view class="card-flex">
									<view v-if="item.dayScore > 0">
										<view class="type">{{ item.monthScore && item.day !== 7 ? '每日+每月奖励' : '每日奖励'}}</view>
										<image class="icon" src="../static/image/score/icon2.png" mode="widthFix"></image>
										<view class="">积分+{{item.monthScore && item.day !== 7 ? (item.dayScore + item.monthScore) : item.dayScore}}</view>
									</view>
									<view v-if="item.weekScore > 0">
										<view class="type">每周奖励</view>
										<image class="icon" src="../static/image/score/icon2.png" mode="widthFix"></image>
										<view class="">积分+{{item.weekScore}}</view>
									</view>
									<view v-if="item.monthScore > 0 && item.day === 7">
										<view class="type">每月奖励</view>
										<image class="icon" src="../static/image/score/icon2.png" mode="widthFix"></image>
										<view class="">积分+{{item.monthScore}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="btn">确定</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		name:"signPop",
		props: {
			list: {
				type: Array
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="less">
.pop-promot-box {
	width: 100%;
	height: 100%;
	position: fixed;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 998;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
}
.bg1{
	width: 92%;
	padding: 6px;
	background: linear-gradient(to top, #130e00, #373632);
	border-radius: 20px;
}
.bg2{
	width: 100%;
	padding: 14px;
	background: linear-gradient(to bottom, #130e00, #373632);
	border-radius: 20px;
}
.bg-in1{
	width: 100%;
	padding: 4px;
	background: linear-gradient(to top, #ffd16b, #fff497);
	border-radius: 18px;
	margin: 0 auto;
}
.bg-in2{
	width: 100%;
	padding: 6px 0;
	padding-left: 10px;
	background: linear-gradient(to bottom, #ffd16b, #fff497);
	border-radius: 18px;
}
.sign-pop-h1{
	font-size: 20px;
	text-align: center;
	margin-bottom: 6px;
}
.sign-pop-h2{
	font-size: 14px;
	text-align: center;
	margin-bottom: 10px;
}
.sign-pop-h3{
	font-size: 12px;
	text-align: center;
	margin-bottom: 10px;
	color: #000;
	font-weight: bold;
}
.btn{
	background: linear-gradient(to bottom, #ffd16b, #fff497);
	box-shadow: 0 6px 0 0 #d9b059;
	color: #000;
	font-size: 16px;
	font-family: hzgb;
	margin: 20px auto 0;
	width: 140px;
	height: 36px;
	text-align: center;
	line-height: 36px;
	border-radius: 36px;
}
.flex-wrap{
	display: flex;
	flex-wrap: wrap;
	// justify-content: space-around;
}
.day-card{
	width: 22%;
	padding: 6px 0;
	margin-right: 4px;
	margin-left: 4px;
	margin-bottom: 10px;
	background: linear-gradient(to bottom, #130e00, #373632);
	border-radius: 4px;
	border: 2px solid #150f02;
	text-align: center;
	font-size: 10px;
}
.active{
	background: linear-gradient(to bottom, #b6359c, #ef0a6a);
	border: 2px solid #ec0b6c;
}

.last-day{
	width: 46.5%;
}
.icon{
	width: 30px;
}
.card-flex{
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.type{
	font-size: 8px;
	margin: 0 2px;
}
.day-title{
	font-weight: bold;
	font-size: 12px;
}
</style>